<!--
  用户管理-运营用户-用户列表
 -->
<template>
  <div class="app-container">
    <!-- 搜索工作栏 -->
    <el-form
      ref="queryForm"
      :model="queryParams"
      size="small"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="姓名" prop="nickname">
        <el-input
          v-model="queryParams.nickname"
          placeholder="请输入姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="部门" prop="deptName">
        <el-input
          v-model="queryParams.deptName"
          placeholder="请输入部门"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input
          v-model="queryParams.mobile"
          placeholder="请输入手机号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="handleQuery"
        >搜索</el-button>
      </el-form-item>
    </el-form>
    <!-- 操作工具栏 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增</el-button>
      </el-col>
    </el-row>
    <!-- 列表 -->
    <el-table v-loading="loading" :data="list" @sort-change="sortChange">
      <el-table-column label="序号" type="index" />
      <el-table-column label="姓名" align="center" prop="nickname" />
      <el-table-column label="部门" align="center" prop="deptName" />
      <el-table-column label="手机号" align="center" prop="mobile">
        <template slot-scope="scope">
          <span>{{ scope.row.mobile }}</span>
        </template>
      </el-table-column>
      <el-table-column
        sortable="custom"
        label="创建时间"
        align="center"
        prop="createTime"
        width="180"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        sortable="custom"
        label="最近登录"
        align="center"
        prop="loginDate"
        width="180"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.loginDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleEdit(scope.row)"
          >编辑</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 新建/编辑学生账户信息(头像、姓名、手机号) -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="openAccountForm"
      width="500px"
      append-to-body
    >
      <el-form
        ref="accountFrom"
        :model="accountFrom"
        :rules="rules"
        label-width="80px"
      >
        <!-- <el-form-item label="证件照" prop="applyUserName">
          <imageUpload v-model="accountFrom.applyUserName" />
        </el-form-item> -->
        <el-form-item label="姓名" prop="nickname">
          <el-input v-model="accountFrom.nickname" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="accountFrom.mobile" :disabled="dialogTitle !== '新建用户信息'" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="部门" prop="deptName">
          <el-input v-model="accountFrom.deptName" placeholder="请输入部门" />
        </el-form-item>
      </el-form>
      <el-row type="flex" class="row-bg" justify="end">
        <el-button type="primary" @click="modefyAccountForm">提交</el-button>
        <el-button @click="cancel">取 消</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { getAdminUser, createAdminUser, deleteAdminUser, updateAdminUser } from '@/api/school-admin-api/hireManage'
// import ImageUpload from '@/components/ImageUpload'
import businessAreaData from '@/utils/businessAreaData.js'
export default {
  name: 'Company',
  components: {
    // ImageUpload
  },
  data() {
    const validatePhone = (rule, value, callback) => {
      const phoneReg = /^[1][0-9]{10}$/
      if (value === '') {
        return callback(new Error('手机号不能为空'))
      } else {
        if (phoneReg.test(value)) {
          return callback()
        } else {
          return callback(new Error('格式有误'))
        }
      }
    }
    const validataEmail = (rule, value, callback) => {
      const emailReg =
        /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
      if (value === '') {
        return callback()
      } else {
        if (emailReg.test(value)) {
          return callback()
        } else {
          return callback(new Error('格式有误'))
        }
      }
    }
    return {
      activeName: 'hire',
      direction: 'rtl',
      openAccountForm: false,
      // 企业行业类型数据，二级联动
      businessAreaData: businessAreaData,
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 企业管理列表
      list: [],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        nickname: '',
        mobile: '',
        deptName: '',
        sortingFields: {
          field: '',
          order: ''
        }
      },
      dialogTitle: '',
      // 个人信息弹窗
      accountFrom: {
        nickname: '', // 姓名
        deptName: '', // 头像
        mobile: '' // 手机号
      },
      // 表单校验
      rules: {
        applyUserName: [
          {
            required: true,
            message: '企业申请人姓名不能为空',
            trigger: 'blur'
          }
        ],
        phoneNumber: [
          { required: true, validator: validatePhone, trigger: 'blur' }
        ],
        tel: [{ required: false, message: '座机号不能为空', trigger: 'blur' }],
        email: [{ required: false, validator: validataEmail, trigger: 'blur' }],
        dept: [{ required: false, message: '部门不能为空', trigger: 'blur' }],
        job: [{ required: false, message: '职位不能为空', trigger: 'blur' }],
        companyName: [
          { required: true, message: '企业名称不能为空', trigger: 'blur' }
        ],
        creditCode: [
          {
            required: true,
            message: '统一社会信用代码不能为空',
            trigger: 'blur'
          }
        ],
        businessLicense: [
          {
            required: true,
            message: '营业执照图片不能为空',
            trigger: 'blur'
          }
        ],
        industryType: [
          {
            type: 'array',
            required: true,
            message: '行业类型不能为空',
            trigger: 'change'
          }
        ],
        postCode: [
          { required: false, message: '邮政编码不能为空', trigger: 'blur' }
        ],
        businessStatus: [
          { required: false, message: '经营状态不能为空', trigger: 'blur' }
        ],
        registeredCapital: [
          { required: false, message: '注册资本不能为空', trigger: 'blur' }
        ],
        establishDate: [
          { required: false, message: '成立日期不能为空', trigger: 'blur' }
        ],
        legalPerson: [
          { required: false, message: '法定代表人不能为空', trigger: 'blur' }
        ],
        scale: [
          { required: false, message: '企业规模不能为空', trigger: 'blur' }
        ],
        companyType: [
          { required: false, message: '企业类型不能为空', trigger: 'change' }
        ],
        registeredAddress: [
          { required: false, message: '注册地址不能为空', trigger: 'blur' }
        ],
        businessScope: [
          { required: false, message: '经营范围不能为空', trigger: 'blur' }
        ],
        subCompanyRelationshipCertificatePicture: [
          {
            required: true,
            message: '子企业关系证明图片不能为空',
            trigger: 'blur'
          }
        ]
      },
      currentRow: null // 当前操作行
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 新增运营用户
    handleAdd() {
      this.dialogTitle = '新建用户信息'
      Object.assign(this.accountFrom, this.$options.data().accountFrom)
      this.openAccountForm = true
    },
    modefyAccountForm() {
      if (this.dialogTitle === '新建用户信息') {
        const params = Object.assign({ password: this.accountFrom.mobile, username: this.accountFrom.mobile }, this.accountFrom)
        createAdminUser(params).then(res => {
          if (res.code === 0 && res.data) {
            this.$message.success('操作成功')
            this.getList()
          }
          this.openAccountForm = false
        })
      } else {
        // 编辑
        const param = Object.assign({ id: this.currentRow.id }, this.accountFrom)
        updateAdminUser(param).then(res => {
          if (res.code === 0 && res.data) {
            this.$message.success('操作成功')
            this.getList()
          }
          this.openAccountForm = false
        })
      }
    },
    sortChange({ column, prop, order }) {
      const sortType = {
        ascending: 'asc',
        descending: 'desc'
      }
      const sortingFields = {
        field: prop,
        order: order !== null ? sortType[order] : null
      }
      if (order === null) {
        Object.assign(this.queryParams.sortingFields, {
          field: '',
          order: ''
        })
        this.getList()
      } else {
        Object.assign(this.queryParams.sortingFields, sortingFields)
        this.getList()
      }
    },
    /** 查询列表 */
    getList() {
      this.loading = true
      // 处理查询参数
      const params = { ...this.queryParams }
      for (const key in params) {
        if (params[key] === '' || params[key] === null) {
          delete params[key]
        }
      }
      if (params.sortingFields.order === '') {
        delete params.sortingFields
      } else {
        params.sortingFields = [params.sortingFields]
      }
      // 执行查询
      getAdminUser(params).then((response) => {
        this.list = response.data.list
        this.total = response.data.total
        this.loading = false
      })
    },
    /** 取消按钮 */
    cancel() {
      this.openAccountForm = false
      this.reset()
    },
    /** 表单重置 */
    reset() {
      this.form = this.$options.data().form
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 编辑学生账户信息 ,打开弹窗
    handleEdit(row) {
      this.dialogTitle = '编辑用户信息'
      this.openAccountForm = true
      this.currentRow = JSON.parse(JSON.stringify(row))
      for (const key in this.currentRow) {
        if (Object.hasOwnProperty.call(this.accountFrom, key)) {
          this.accountFrom[key] = this.currentRow[key]
        }
      }
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const nickname = row.nickname
      const id = row.id
      this.$modal
        .confirm('确认删除用户' + nickname + '?')
        .then(function() {
          return deleteAdminUser({ id })
        })
        .then(() => {
          this.getList()
          this.$modal.msgSuccess('删除成功')
        })
        .catch(() => {})
    }
  }
}
</script>
